<template>
    <div class="topic">
      <h1 class="title">穿越时空的桥梁，探索人类文明的璀璨篇章</h1>
    </div>
  </template>
  
  <style scoped>
  .topic {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20vh; /* 使话题区域占满整个视口高度 */
    /* background-color: #f0f0f0; 
    background-image: url('path-to-your-background-image.jpg');  */
    background-size: cover; /* 背景图片覆盖整个背景 */
    background-position: center; /* 背景图片居中 */
    text-align: center; /* 文字居中 */
  }
  
  .title {
    font-size: 2.5em; /* 字体大小 */
    font-weight: bold; /* 字体加粗 */
    color: #d35400; /* 文字颜色，这里使用了一种温暖的橙色 */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 文字阴影，增加立体感 */
    transition: transform 0.3s ease; /* 平滑变换效果 */
  }
  
  .title:hover {
    transform: scale(1.05); /* 鼠标悬停时放大 */
  }
  </style>